<template>
    <!-- vue3页面 -->
    
    <div>
        <el-table :data="tableData" style="width: 100%" border stripe @header-click="headerClick">
            <el-table-column label="合同代码" prop="asset_code"></el-table-column>
            <el-table-column label="合同名称" prop="asset_name"></el-table-column>

            <!-- v-model="searchData[scope.$index].begin_code" -->
            <el-table-column >
                <template #header>
                    <el-radio v-model="headerRadio" label="2">附加基准A</el-radio>
                </template>
                <template #default="scope">
                   <el-radio v-model="searchData[scope.$index].begin_code" :label="scope.row.asset_01_id" v-if="scope.row.asset_01_id"  @change="radioChange(scope,scope.$index,$event,searchData[scope.$index].begin_code)"  @click="radioClick(searchData[scope.$index].begin_code,scope.$index,scope,$event)">{{scope.row.asset_01_nm}}</el-radio>
                </template>
            </el-table-column>
            <el-table-column >
                <template #header>
                    <el-radio v-model="headerRadio" label="3">附加基准B</el-radio>
                </template>
                <template #default="scope">
                   <el-radio v-model="searchData[scope.$index].begin_code" :label="scope.row.asset_02_id" v-if="scope.row.asset_02_id"  @change="radioChange(scope,scope.$index)">{{scope.row.asset_02_nm}}</el-radio>
                </template>
            </el-table-column>
            <el-table-column >
                <template #header>
                    <el-radio v-model="headerRadio" label="4">附加基准C</el-radio>
                </template>
                <template #default="scope">
                   <el-radio v-model="searchData[scope.$index].begin_code" :label="scope.row.asset_03_id" v-if="scope.row.asset_03_id"  @change="radioChange(scope,scope.$index)">{{scope.row.asset_03_nm}}</el-radio>
                </template>
            </el-table-column>
            <el-table-column >
                <template #header>
                    <el-radio v-model="headerRadio" label="5">附加基准D</el-radio>
                </template>
                <template #default="scope">
                   <el-radio v-model="searchData[scope.$index].begin_code" :label="scope.row.asset_04_id" v-if="scope.row.asset_04_id"  @change="radioChange(scope,scope.$index)">{{scope.row.asset_04_nm}}</el-radio>
                </template>
            </el-table-column>
            <el-table-column >
                <template #header>
                    <el-radio v-model="headerRadio" label="6">自定义</el-radio>
                </template>
                <template #default="scope" >
                   <el-radio v-model="searchData[scope.$index].begin_code" :label="scope.row.asset_05_id" >
                        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
                   </el-radio>
                </template>
            </el-table-column>  

            <el-table-column label="操作">
            <template #default="scope">
                <el-button  size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
            </template>
            </el-table-column>
        </el-table>
        
    </div>
</template>

<script lang='ts'>
import { defineComponent, onMounted, reactive, ref, toRefs } from 'vue'
export default defineComponent({
    name: 'App',
    setup() {
        const tableData:any =[
            {
                asset_name:'第一条',
                asset_code:'001',
                asset_01_id:'000001',
                asset_01_nm:'这是第一条第一列数据内容',
                asset_02_id:'000002',
                asset_02_nm:'这是第一条第二列数据内容',
                asset_03_id:'000003',
                asset_03_nm:'这是第一条第三列数据内容',
                asset_04_id:'000004',
                asset_04_nm:'这是第一条第四列数据内容',
                begin_date:'2022-2-1'
            },
            {
                asset_name:'第二条',
                asset_code:'002',
                asset_01_id:null,
                asset_01_nm:null,
                asset_02_id:'000022',
                asset_02_nm:'这是第二条第二列数据内容',
                asset_03_id:null,
                asset_03_nm:null,
                asset_04_id:'000024',
                asset_04_nm:'这是第二条第四列数据内容',
                begin_date:'2022-2-2'
            },
            {
                asset_name:'第三条',
                asset_code:'003',
                asset_01_id:null,
                asset_01_nm:null,
                asset_02_id:null,
                asset_02_nm:null,
                asset_03_id:null,
                asset_03_nm:null,
                asset_04_id:null,
                asset_04_nm:null,
                begin_date:'2022-2-3'
            },
            {
                asset_name:'第四条',
                asset_code:'004',
                asset_01_id:'000041',
                asset_01_nm:'这是第四条第一列数据内容',
                asset_02_id:null,
                asset_02_nm:null,
                asset_03_id:'000043',
                asset_03_nm:'这是第四条第三列数据内容',
                asset_04_id:null,
                asset_04_nm:null,
                begin_date:'2022-2-4'
            },
        ]
        const radioList = reactive({
            headerRadio:'2',
            asset_01:'',
            asset_02:'',
            asset_03:'',
            asset_04:'',
            asset_05:'',
        })
        const searchData =reactive([
            {
                asset_name:'',
                asset_code:'',
                begin_code:'' as any,
                begin_date:''
            }
        ])
        const changed = ref(false)
        const radioChange =(scope:any,index:any,event:any,val:any)=>{
            // console.log(scope,index)
            // console.log(searchData,'search')
            //判断当前切换后的列与表头的列是否一致 不一致的话 要取消表头的勾选 
            // 还要判断如果 要是切换的时候 每一列都绑的同一列ID 还要把表头列勾上 未实现
            if(radioList.headerRadio !== scope.cellIndex){
                radioList.headerRadio =''
            }
            // console.log(val,'vallll')
            // if(val){
            //     console.log(1111)
            //     event.target.checked=false
            // }else{
            //     console.log(222)
            //     event.target.checked=true
            // }

            // val === searchData[index].begin_code ? searchData[index].begin_code = '' : searchData[index].begin_code = val
            // console.log(radioList.headerRadio,'当前选择的列')
        }

        //点击取消勾选 未实现
        const radioClick =(val:any,index:number,scope:any,event:any)=>{

            // if(radioList.headerRadio !== scope.cellIndex){
            //     radioList.headerRadio =''
            // }

            console.log(val,'vallll',index,'index')
            // if(val){
            //     console.log(1111)
            //     event.target.checked=false
            //     val === searchData[index].begin_code ? searchData[index].begin_code = '' : searchData[index].begin_code = val
            //     return
            // }else{
            //     console.log(222)
            //     event.target.checked=true
            //     val === searchData[index].begin_code ? searchData[index].begin_code = '' : searchData[index].begin_code = val
            //     return
            // }

            // event.target.checked=false
            val === searchData[index].begin_code ? searchData[index].begin_code = '' : searchData[index].begin_code = val

            
            
            
            
            // console.log(val === searchData[index].begin_code)
            

            console.log(searchData,'search')

        }
        const handleEdit =(index:any,row:any)=>{
            console.log(index,row)
        }
        const handleDelete =(index:any,row:any)=>{
            console.log(index,row)
        }
        const headerClick =(column:any,row:any)=>{
            console.log(column.no)
            console.log(radioList,searchData,'syd')

            let ss = "asset_0"+ (column.no -1)+ '_id';

            for(let i =0;i<searchData.length;i++){
                searchData[i].begin_code = tableData[i][ss]
            }

            console.log(radioList,searchData,'syd')
        }
        onMounted(()=>{
            let dataLength = tableData.length;
            for(let z =0;z<dataLength-1;z++){
                searchData.push(
                    {
                        asset_name:'',
                        asset_code:'',
                        begin_code:'' as any,
                        begin_date:''
                    }
                )
                
            }
            
            for(let i =0;i<tableData.length;i++){
                tableData[i].asset_05_id ='zidingyi'
                searchData[i].asset_name = tableData[i].asset_name
                searchData[i].asset_code = tableData[i].asset_code
                searchData[i].begin_code = tableData[i].asset_01_id
                searchData[i].begin_date = tableData[i].begin_date
            }

            console.log(searchData,'search',tableData,'table')
        })
        return {
            ...toRefs(radioList),
            searchData,
            tableData,
            radioChange,
            handleDelete,
            handleEdit,
            radioClick,
            changed,
            headerClick
        }
    }
})
</script>

<style scoped>

</style>